<template>
  <dv-full-screen-container class="container">
    <div class="content">
      <dv-border-box-11 title="杭州新兴钢铁">
        <div @click="quit()" class="quit">退出</div>
        <div class="container laoda">
          <div class="box left">
            <dv-border-box-1 class="border-box progress">
              <div class="word">
                <h3>产品情况</h3>
                <h3>------------</h3>
                <h1 style="text-indent:2em">粗钢</h1>
                <h3>------------</h3>
              </div>
            </dv-border-box-1>
            <dv-border-box-8 class="border-box">
              <h3 class="word" style="margin-top:5%">各周期碳排放占比</h3>
              <dv-active-ring-chart :config="config10" style="width:250px;height:200px" class="circle"/>
            </dv-border-box-8>
            <dv-border-box-8 class="border-box">

              <dv-scroll-ranking-board :config="config9" class="charts" style="width:280px;height:390px"/>

            </dv-border-box-8>
          </div>

          <div class="box center">
            <dv-decoration-5 style="width:700px;height:20px;"/>
            <dv-border-box-1 class="border-box">
              <div>
                <dv-decoration-9 style="width:150px;height:150px;" class="water" :color="['red','#f55252']">
                  <h2 class="number">13273</h2>
                </dv-decoration-9>
                <dv-decoration-9 style="width:150px;height:150px;" class="water" :color="['blue','#5e8beb']">
                  <h2 class="number">60%</h2>
                </dv-decoration-9>
                <dv-decoration-9 style="width:150px;height:150px;" class="water" :color="['#04950e','#7fea86']">
                  <h2 class="number">53%</h2>
                </dv-decoration-9>
                <dv-decoration-9 style="width:150px;height:150px;" class="water" :color="['#e9f23c','#eaee9a']">
                  <h2 class="number">47%</h2>
                </dv-decoration-9>
              </div>
              <div>
                <h4 class="numberText">总排放量</h4>
                <h4 class="numberText">最大碳排放阶段：<br>原材料获取</h4>
                <h4 class="numberText">最大排放源：<br>铁矿石</h4>
                <h4 class="numberText">最大工序排放：<br>炼钢</h4>
              </div>
            </dv-border-box-1>
            <dv-border-box-1 class="border-box" style="height:600px">
              <div class="screen-box">

                <!-- <div class="screen-card">
                  <div class="stage-name">{{stage}}</div>
                  <div></div>
                </div> -->
                <div class="screen-chart">
                  <SmoothLine/>

                </div>
              </div>

            </dv-border-box-1>
          </div>
          <div class="box right">
            <dv-border-box-8 class="border-box">
              <acc style="width:310px;height:310px;" class="charts"></acc>
            </dv-border-box-8>
            <dv-border-box-8 class="border-box">
              <dv-scroll-board :config="config3" class="charts" style="width:310px;height:300px;"/>
            </dv-border-box-8>
          </div>
        </div>
      </dv-border-box-11>
    </div>
  </dv-full-screen-container>
</template>
<script>
import SmoothLine from '@/components/Chart/SmoothLine'
import LoadCar from '@/components/Chart/LoadCar'
import dline from '@/components/carbonFootprintVerificationScreen/OneLine-vue'
import barbgc from '@/components/carbonFootprintVerificationScreen/Bar-bgc'
import acc from '@/components/carbonFootprintVerificationScreen/Accumulate-water.vue'
import {
  config1,
  config2,
  config3,
  config4,
  config5,
  config6,
  config7,
  config8,
  config9,
  config10,
  config11
} from "@/components/carbonFootprintVerificationScreen/config"

export default {
  components: {
    //eline,
    dline,
    barbgc,
    acc,
    SmoothLine,
    LoadCar
  },
  name: "screen-vue",
  data() {
    return {
      config1,
      config2,
      config3,
      config4,
      config5,
      config6,
      config7,
      config8,
      config9,
      config10,
      config11,
      stage: "生产阶段"
    }
  },
  methods: {
    quit() {
      this.$router.push("/")
    },
  }
}
</script>
<style scoped>
.stage-name {
  font-size: 18px;
}

.screen-box {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  /* display:flex; */
  height: 420px;
  color: #fff;
}

.screen-card {
  /* flex:2; */
  border: 1px solid #333f4e;
  display: grid;
  justify-content: center;
  padding-top: 10px;
}

.screen-chart {
  /* flex:7; */
  width: 100%;
  border: 1px solid #333f4e
}

.quit {
  display: fixed;
  top: 100px;
  right: 100px;
  font-size: 20px;
  z-index: 999;
  color: #fff;
}

.container {
  display: flex;
  flex-direction: row;
  background-color: #01132C;
}

.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;

}

.left {
  width: 25%;
  height: 35%;
}

.right {
  width: 25%;
  height: 100%;
}

.center {
  width: 50%;
}

.charts {
  width: 90%;
  margin: 5%;
}

.laoda {
  margin: 10vh 2.5vw;
  width: 95vw;
  height: 88vh;
  display: flex;
  flex-direction: row;
  /* background-color: antiquewhite; */
}

.box {
  display: flex;
  flex-direction: column;
}

.title {
  margin-top: 60px;
}

.circle {
  margin-left: 10%;
}

.Fly {
  width: 100%;
  height: 95%;
  margin: 0 4px;
}

.son {
  display: inline-block;
  width: 50%;
  margin-top: 2%;
}

.top {
  height: 65%;
  margin: 0;
}

.bottom {
  height: 35%;
}

.list {
  height: 180px;
}


.word {
  margin: 0 10%;
  color: white;
}

.water {
  display: inline-block;
  margin-left: 2%;
  margin-top: 8%;
}

.number {
  color: white;
  margin: 40% 35%;
}

.numberText {
  color: white;
  margin-left: 5%;
  display: inline-block;
  width: 20%;
  font-size: 16px;
}
</style>


